<template>
  <div class="fl">
    <div class="top">
      <div class="left" @click="back()">
        <img
          src=""
        />
      </div>
      <div class="center">
          <input type="text" placeholder="搜索商品名称"  @input="specifiName"/>
      </div>
      <div class="right">
        <div class="ri"><i></i></div>
      </div>
    </div>
   
       <div class="mi"  v-if="lis">
           <ul><li v-for="(item,index) in lis" :key="index">{{item.title}}</li></ul>


       </div>
        <div class="connst" v-else>
      <div class="min">
        <div class="tou">搜索发现</div>
        <div class="log"><img :src="log" alt="" srcset=""></div>
        <ul class="mna">
            <li v-for="(item,index) in list" :key="index">
                {{item.desc}}
            </li>
        </ul>
      </div>
   
    </div>
  </div>
</template>
<script>
import axios from "axios";
import qs from 'qs'
export default {
  data() {
    return {
list:"",
log:"",
inp:"",
lis:"",
      data: {
        client_id: 180100031051,
        channel_id: "",
        webp: 1,
        version: 2,
      },
    };
 
  },
     methods: {
         back(){
        this.$router.push('/')
      },
        specifiName(e){
        var val = e.target.value;
var dat={
client_id: 180100031051,
channel_id: "",
webp: 1,
query: val,
}

          var dataObj = qs.stringify(dat);
    axios({
      method: "post",
      url: "api/v1/hisearch/suggestion_v3",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      data: dataObj,
    }).then((res) => {
     
    //   console.log(res);
    this.lis=res.data.data.list
  console.log(res.data.data.list);
    });
        }
    },
  created() {
    var dataObj = qs.stringify(this.data);
    axios({
      method: "post",
      url: "api/v1/hisearch/se_default",
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      data: dataObj,
    }).then((res) => {
      this.list=res.data.data.discover_list
    //   console.log(res);
    this.log=res.data.data.ad_list[0].body.items[0].img_url;
  console.log(this.list);
    });
  },
};
</script>
<style scope>
.fl {
  height: 100vh;
  width: 100vw;
  background: white;
  position: relative;
  z-index: 9999999;
}
.top {
  height: 6vh;
  width: 100vw;
  display: flex;
  background: #f2f2f2;
  position: relative;
  float: left;
  flex-direction: row;
  padding: 2px;
  box-sizing: border-box;
}
.center {
  position: absolute;
  left: 13vw;
  height: 6vh;
  right: 15vw;
  flex: 1;
  background: #f2f2f2;
  /* float: left; */
}
.center .title {
  position: relative;
  line-height: 6vh;
  height: 5vh;
  background: white;
}
input {
  width: 71vw;
  height: 5vh;
  border: 0;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  outline: none;
}
.top .left {
  box-sizing: border-box;
  position: absolute;
  width: 15vw;
  display: flex;
  height: 6vh;
  flex-direction: row;
  text-align: center;
  background: #f2f2f2;
}
.left img {
  width: 8vw;
  height: 3vh;
  display: block;
  position: absolute;
  top: 50%;
  bottom: 50%;
  margin-top: -1.5vh;
}
.title i {
  width: 9vw;
  height: 4vh;
  position: absolute;
  top: 50%;
  bottom: 50%;
  margin-top: -2vh;
  background: white;
  display: block;
  background-image: url("");
  background-repeat: no-repeat;
  background-size: 4vh;
}
.right i {
  width: 9vw;
  height: 4vh;
  position: absolute;
  top: 50%;
  bottom: 50%;
  left: 50%;
  right: 50%;
  margin-left: -4.5vw;
  margin-top: -2vh;
  background: #f2f2f2;
  display: block;
background-image: url("");
  background-repeat: no-repeat;
  background-size: 3vh;
  float: right;
}
.ri {
  background: #f2f2f2;
}
.right {
  position: absolute;
  width: 15vw;
  height: 6vh;
  background: #f2f2f2;

  right: 0;
}
.connst {
  position: absolute;
  top: 6vh;
  bottom: 0;
  right: 0;
  left: 0;
 background: white;
  padding: 2vh;
  box-sizing: border-box;
}
.mi{
    position: absolute;
  top: 6vh;
  bottom: 0;
  right: 0;
  left: 0;

  padding: 2vh;
  box-sizing: border-box; 
}
.mi ul{
    background: gray;
    height: 92vh;
}
.mi li{
    width: 93vw;
    height: 8vh;
    background: white;
    line-height: 8vh;
    padding-left: 2vh;
    border-bottom: 0.2vh solid gray;
    box-sizing: border-box;
    font-size: 2vh;
}
.min {
  width: 92vw;
  height: 50vh;
  
}
.tou {
  font-size: 3vh;
  width: 92vw;
  height: 6vh;
}
.log{
    width: 92vw;
}
.log img{
    width: 92vw;
}
.mna{
    width: 92vw;
    height: 50vh;
    background: white;
    margin-top: 1vh
}
.mna li{
    float: left;
    width: 42vw;
    font-size: 2vh;
    margin-bottom: 2vh;
    margin-left: 2vh;
}
</style>